//	仪表盘样式配置
import React, { useState } from 'react';
import { Switch } from 'antd';
import Editor from 'src/pages/AnalyseManage/EditReport/components/EditorStyleType/Editor';
import FormItem from 'antd/lib/form/FormItem';
import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

const GaugeCustom = ( props: IProps ) => {
	const { config, onValuesChange, form } = props;

	const [ isShowLabel, setShowLabel ] = useState( config.style && config.style.isShowLabel === false ? false : true );
	const [ isShowValue, setShowValue ] = useState( config.style && config.style.isShowValue === false ? false : true );
	const [ hiddenScale, setHiddenScale ] = useState( config.style && config.style.hiddenScale === true ? true : false );

	const fontConfig = [
		'fontFamily', 'fontSize', 'fontColor', 'fontBold', 'fontItalic'
	];

	const handleShowLabelChange = ( value ) => {
		setShowLabel( value );
		form.setFieldsValue( { isShowLabel: value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleShowValueChange = ( value ) => {
		setShowValue( value );
		form.setFieldsValue( { isShowValue: value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	const handleHiddenScale = ( value ) => {
		setHiddenScale( value );
		form.setFieldsValue( { hiddenScale: value } );
		onValuesChange( config.type, config.key, filterObjectNullKeys( form.getFieldsValue() ), 'style' );
	};

	return (

		<div>
			<FormItem label="指标名称是否显示" name="isShowLabel" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ isShowLabel } onChange={ handleShowLabelChange }/>
			</FormItem>

			<FormItem label="指标字体" name="labelFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Editor
					config={ config }
					form={ form }
					onValuesChange={ onValuesChange }
					fontFamilyName="labelFontFamily"
					fontSizeName="labelFontSize"
					fontColorName="labelFontColor"
					boldName="labelFontBold"
					italicName="labelFontItalic"
					fontConfig={ fontConfig }
				/>
			</FormItem>

			<FormItem label="值是否显示" name="isShowValue" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ isShowValue } onChange={ handleShowValueChange }/>
			</FormItem>

			<FormItem label="值字体" name="valueFont" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Editor
					config={ config }
					form={ form }
					onValuesChange={ onValuesChange }
					fontFamilyName="valueFontFamily"
					fontSizeName="valueFontSize"
					fontColorName="valueFontColor"
					boldName="valueFontBold"
					italicName="valueFontItalic"
					fontConfig={ fontConfig }
				/>
			</FormItem>

			<FormItem label="隐藏刻度值" name="hiddenScale" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<Switch checked={ hiddenScale } onChange={ handleHiddenScale }/>
			</FormItem>
		</div>

	);
};

export default React.memo( GaugeCustom );
